<template>
  <ContentWrap title="版权到期提醒">
    <!-- 搜索工作栏 -->
    <el-form
      ref="formRef"
      :inline="true"
      :model="formData"
      :rules="formRules"
      class="-mb-15px"
      label-width="145px"
    >
      <el-form-item label="未过期版权 :" prop="notExpiresCopyright">
        <el-popover placement="left-end" :width="850" trigger="click">
          <template #reference>
            <el-button style="margin-right: 16px">查看版权列表</el-button>
          </template>
          <el-table :data="list">
            <el-table-column width="50" property="id" label="ID" />
            <el-table-column width="120" property="name" label="资源名称" show-overflow-tooltip />
            <el-table-column width="90" property="type" label="资源类型" />
            <el-table-column property="contractNumber" label="合同编号" show-overflow-tooltip />
            <el-table-column property="copyrightNumber" label="版权编号" show-overflow-tooltip />
            <el-table-column width="180" property="copyrightValidity" label="版权有效期" />
            <el-table-column width="80" property="copyrightStatus" label="版权状态">
              <template #default="scope">
                <el-tag v-if="scope.row.copyrightStatus == '正常'" type="success">{{
                  scope.row.copyrightStatus
                }}</el-tag>
                <el-tag v-else="scope.row.copyrightStatus == '已过期'" type="danger">{{
                  scope.row.copyrightStatus
                }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-popover>
      </el-form-item>
      <br />
      <el-form-item label="设置到期提醒时间 :" prop="labelTime">
        <el-select
          v-model="formData.labelTime"
          placeholder="请选择到期前多长时间"
          @change="handleOptionChange(formData.labelTime)"
        >
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="'提前' + item.value"
            :value="item.value"
          />
        </el-select>
        <span>例如版本有效期为2023.1.1-2024.1.1,设置1天,则在2023.12.31发出下架提醒</span>
      </el-form-item>
      <br />
      <el-form-item label="下架方式 :" prop="out">
        <el-radio-group v-model="formData.out" class="!w-240px">
          <el-radio label="artificial" size="large">人工下架</el-radio>
          <el-radio label="auto" size="large">到期自动下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <br />
      <el-form-item label="通知方式 :" prop="info">
        <el-checkbox-group v-model="formData.info" class="!w-600px">
          <el-checkbox label="massage">站内信提醒</el-checkbox>
          <!-- <el-checkbox label="mail">邮箱提醒</el-checkbox>
          <el-checkbox label="phone">手机短信</el-checkbox> -->
        </el-checkbox-group>
      </el-form-item>
      <br />
      <el-form-item label="接收人 :" prop="userId">
        <el-select
          v-model="formData.userId"
          placeholder="请选择接收人"
          multiple
          collapse-tags
          collapse-tags-tooltip
          @change="handleCascaderChange"
        >
          <el-option
            v-for="item in userOption"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="centered">
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm()">重置</el-button></div
    >
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import * as CopyrightApi from '@/api/copyright/copyright'
import * as WarnApi from '@/api/copyright/warn'

const message = useMessage() // 消息弹窗
const userOption = ref<UserApi.UserVO[]>([]) // 管理员列表
const formRef = ref() // 表单 Ref
const list = ref([
  {
    id: undefined,
    name: '',
    type: '',
    contractNumber: '',
    copyrightNumber: '',
    copyrightValidity: '',
    copyrightStatus: ''
  }
]) // 列表的数据

const handleCascaderChange = (value) => {
  console.log('选中的值:', value)
}
/** 表单 */
const formData = ref({
  out: 'auto', // 下架方式
  info: ['massage'], // 通知方式
  time: '', // 提前几小时/天
  labelTime: '', // 选择框显示提前几小时/天
  deadline: '', // 截止日期
  userId: [], // 用户id
  userType: 2, // 用户类型
  templateCode: 'BPM_MESSAGE', // 站内信模板编码
  templateParams: '' // 模板提醒内容
})

/** 到期提醒 */
const options = [
  {
    value: '1小时',
    label: '1'
  },
  {
    value: '3小时',
    label: '3'
  },
  {
    value: '6小时',
    label: '6'
  },
  {
    value: '1天',
    label: '24'
  },
  {
    value: '3天',
    label: '72'
  },
  {
    value: '6天',
    label: '144'
  },
  {
    value: '15天',
    label: '360'
  }
]

/** 到期时间更变取值 */
const handleOptionChange = async (value) => {
  const selectedOption = options.find((item) => item.value === value)
  formData.value.time = selectedOption ? selectedOption.label : ''
}

/** 表单验证规则 */
const formRules = reactive({
  labelTime: [{ required: true, message: '提醒时间不能为空', trigger: 'change' }],
  userId: [{ required: true, message: '接收人不能为空', trigger: 'change' }]
})
/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  const form = new FormData()
  form.append('out', formData.value.out)
  form.append('time', formData.value.time)
  form.append('labelTime', formData.value.labelTime)
  form.append('deadline', formData.value.deadline)
  form.append('userIds', formData.value.userId + ',')
  await WarnApi.warnSendNotify(form)

  message.success('提交发送成功！发送结果，见发送日志编号：' + 1)
  resetForm()
}

/** 重置按钮操作 */
const resetForm = async () => {
  formData.value = {
    out: 'auto',
    info: ['massage'],
    time: '',
    labelTime: '',
    deadline: '',
    userId: [],
    userType: 1,
    templateCode: 'BPM_MESSAGE',
    templateParams: ''
  } as any
  formRef.value?.resetFields()
}

/** 查询列表 */
const getList = async () => {
  try {
    userOption.value = await UserApi.getSimpleUserList()
    const data = await CopyrightApi.getNotExpiresCopyright()
    list.value = data
  } finally {
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
